<template>
  <el-table
    :data="PermisstionArr"
    style="width: 100%; margin-bottom: 20px"
    row-key="menuId"
    border
  >
    <el-table-column label="名称" prop="menuName"></el-table-column>
    <el-table-column label="组件路径" prop="component"></el-table-column>
    <el-table-column label="路由地址" prop="path"></el-table-column>
    <el-table-column label="菜单图标" prop="icon"></el-table-column>
    <el-table-column label="状态" prop="visible">
      <template #default="{ row }">
        {{ row.visible == '0' ? '显示' : '隐藏' }}
      </template>
    </el-table-column>
    <el-table-column label="类型" prop="menuType">
      <template #default="{ row }">
        {{
          row.menuType == 'M' ? '目录' : row.menuType == 'C' ? '菜单' : '按钮'
        }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300px">
      <!-- row:即为已有的菜单对象|按钮的对象的数据 -->
      <template #="{ row }">
        <el-button
          type="primary"
          v-has="`btn:Menu:addPermisstion`"
          icon="Plus"
          @click="addPermisstion(row)"
          size="small"
          :disabled="row.menuType == 'F' ? true : false"
        >
          {{ row.menuType == 'M' ? '添加菜单' : '添加功能' }}
        </el-button>
        <el-button
          icon="Edit"
          v-has="`btn:Menu:updatePermisstion`"
          type="primary"
          @click="updatePermisstion(row)"
          size="small"
        >
          编辑
        </el-button>
        <el-popconfirm
          :title="`你确定要删除${row.menuName}?`"
          width="260px"
          @confirm="removeMenu(row.menuId)"
        >
          <template #reference>
            <el-button
              type="primary"
              v-has="`btn:Menu:removeMenu`"
              icon="Delete"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 对话框组件:添加或者更新已有的菜单的数据结构 -->
  <el-dialog
    v-model="dialogVisible"
    :title="menuData.menuId ? '更新菜单' : '添加菜单'"
  >
    <!-- 表单组件:收集新增与已有的菜单的数据 -->
    <el-form>
      <el-form-item label="名称">
        <el-input
          placeholder="请你输入菜单名称"
          v-model="menuData.menuName"
        ></el-input>
      </el-form-item>
      <el-form-item label="路由地址">
        <el-input
          placeholder="请你输入路由地址"
          v-model="menuData.path"
        ></el-input>
      </el-form-item>
      <el-form-item label="组件路径">
        <el-input
          placeholder="请你输入组件路径"
          v-model="menuData.component"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜单图标">
        <el-input
          placeholder="请你输入菜单图标"
          v-model="menuData.icon"
        ></el-input>
      </el-form-item>
      <el-form-item label="权限标识">
        <el-input
          placeholder="请你输入权限标识"
          v-model="menuData.perms"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          placeholder="请你输入备注"
          v-model="menuData.remark"
        ></el-input>
      </el-form-item>
      <el-form-item label="顺序">
        <el-input
          placeholder="请你输入显示顺序"
          type="number"
          v-model="menuData.orderNum"
        ></el-input>
      </el-form-item>
      <el-form-item label="参数">
        <el-input
          placeholder="请你输入参数"
          v-model="menuData.query"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="menuData.visible"
          placeholder="请你输入菜单状态（0显示 1隐藏）"
        >
          <el-option
            v-for="item in [
              { label: '显示', value: '0' },
              { label: '隐藏', value: '1' },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select
          v-model="menuData.menuType"
          placeholder="请你输入菜单类型（M目录 C菜单 F按钮）"
        >
          <el-option
            v-for="item in [
              { label: '目录', value: 'M' },
              { label: '菜单', value: 'C' },
              { label: '按钮', value: 'F' },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="外链">
        <el-select
          v-model="menuData.isFrame"
          placeholder="请你输入是否为外链（0是 1否）"
        >
          <el-option
            v-for="item in [
              { label: '是', value: '0' },
              { label: '否', value: '1' },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="缓存">
        <el-select
          v-model="menuData.isCache"
          placeholder="请你输入是否缓存（0缓存 1不缓存）"
        >
          <el-option
            v-for="item in [
              { label: '缓存', value: '0' },
              { label: '不缓存', value: '1' },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="menuData.status"
          placeholder="请你输入菜单状态（0正常 1停用）"
        >
          <el-option
            v-for="item in [
              { label: '正常', value: '0' },
              { label: '停用', value: '1' },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
//引入获取菜单请求API
import {
  reqAllPermisstion,
  reqAddOrUpdateMenu,
  reqRemoveMenu,
} from '@/api/acl/menu'
//引入ts类型
import type {
  MenuParams,
  MenuResponseData,
  MenuList,
  MunuData,
} from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus'
//存储菜单的数据
let PermisstionArr = ref<MenuList>([])
//控制对话框的显示与隐藏
let dialogVisible = ref<boolean>(false)
//携带的参数
let menuData = reactive<MenuParams>({
  path: '',
  icon: '',
  visible: '0',
  menuType: 'M',
  component: '',
  menuName: '',
  parentId: 0,
  query: '',
  isFrame: '1',
  isCache: '1',
  status: '0',
  perms: '',
  remark: '',
  orderNum: 0,
})
//组件挂载完毕
onMounted(() => {
  findAllMenu()
})
//获取菜单数据的方法
const findAllMenu = async () => {
  let result: MenuResponseData = await reqAllPermisstion()
  if (result.code == 200) {
    PermisstionArr.value = result.data
  }
}

//添加菜单按钮的回调
const addPermisstion = (row: MunuData) => {
  //清空数据
  Object.assign(menuData, {
    menuId: 0,
    path: '',
    icon: '',
    visible: '0',
    menuType: 'M',
    component: '',
    menuName: '',
    parentId: 0,
    query: '',
    isFrame: '1',
    isCache: '1',
    status: '0',
    perms: '',
    remark: '',
    orderNum: 0,
  })
  //对话框显示出来
  dialogVisible.value = true
  //给谁新增子菜单
  menuData.parentId = row.menuId as number
}
//编辑已有的菜单
const updatePermisstion = (row: MunuData) => {
  dialogVisible.value = true
  //点击修改按钮:收集已有的菜单的数据进行更新
  Object.assign(menuData, row)
}

//确定按钮的回调
const save = async () => {
  //发请求:新增子菜单|更新某一个已有的菜单的数据
  let result: any = await reqAddOrUpdateMenu(menuData)
  if (result.code == 200) {
    //对话框隐藏
    dialogVisible.value = false
    //提示信息
    ElMessage({
      type: 'success',
      message: menuData.menuId ? '更新成功' : '添加成功',
    })
    //再次获取全部最新的菜单的数据
    findAllMenu()
  }
}

//删除按钮回调
const removeMenu = async (menuId: number) => {
  let result = await reqRemoveMenu(menuId)
  if (result.code == 200) {
    ElMessage({ type: 'success', message: '删除成功' })
    findAllMenu()
  }
}
</script>

<style scoped></style>
